import React, { useState } from 'react';
import { useEffect } from 'react';
import { history } from 'umi';
import './index.less';
const App = (props) => {
  const { data, accessId, showMenu } = props;
  const down =
    '';
  const up =
    '';
  const [selectKey, setSelectKey] = useState(null);
  const [downList, setDownList] = useState([]);
  const { subAccessList = [] } = data;
  const MenuTwoList = ({ item }) => {
    const { accessUrl, accessName, id } = item;
    return (
      <div
        onClick={() => {
          history.push({
            pathname: accessUrl,
            query: {
              accessId: id,
            },
          });
          setSelectKey(accessId);
        }}
        className={
          selectKey == item.id
            ? 'second_item three_item_active three_item_activePadding'
            : 'second_item three_item_activePadding'
        }
      >
        {accessName}
      </div>
    );
  };
  useEffect(() => {
    setSelectKey(accessId);
  }, [accessId]);
  useEffect(() => {
    setDownList(
      subAccessList
        .filter((item) => {
          if (!item.accessUrl) {
            return true;
          } else {
            return false;
          }
        })
        .map((item) => {
          return item.id;
        }),
    );
  }, [data.id]);
  const handleDown = (id) => {
    if (downList.includes(id)) {
      setDownList(
        downList.filter((item) => {
          return item !== id;
        }),
      );
    } else {
      setDownList([...downList, id]);
    }
  };
  if (data.accessUrl || !data.id) {
    return null;
  } else {
    return (
      <div className={`HeaderMenu_wrap ${showMenu ? 'slideOutinactive' : 'slideIninactive'}`}>
        <div style={{ height: 24 }}></div>
        {subAccessList.map((item, key) => {
          const { accessName, id, accessUrl } = item;
          if (accessUrl) {
            return (
              <div key={item.id} className="second_index_menu_box">
                <MenuTwoList key={key} item={item}></MenuTwoList>
              </div>
            );
          } else {
            return (
              <div key={key} className="second_index_menu_box">
                <div onClick={() => handleDown(id)} className="second_index_menu_title">
                  <span className="menu_title_text">{accessName}</span>
                  <img src={downList.includes(id) ? up : down} className="title_icon" />
                </div>
                {downList.includes(id) &&
                  item.subAccessList &&
                  item.subAccessList.map((item, index) => {
                    return <MenuTwoList key={index} item={item}></MenuTwoList>;
                  })}
              </div>
            );
          }
        })}
      </div>
    );
  }
};

export default App;
